<template>
	<view>

		<view class="box">
			<image class="bg" src="/static/wrong_bg.png" mode="widthFix"></image>
			<view class="cuoti-header">
				<view class="cuoti-one">
					<text>{{stuName}} 3道错题</text>
				</view>
				<view class="cuoti-two">
					<text>错题率 30%</text>
				</view>
			</view>

			<view class="dq">
				<view class="subject">
					<view class="nubber">
						<text class="num">3</text>
						<text class="txt">全部错题</text>
					</view>
					<view class="nubber">
						<text class="num">1</text>
						<text class="txt">判断题</text>
					</view>
					<view class="nubber">
						<text class="num">2</text>
						<text class="txt">选择题</text>
					</view>
				</view>
			</view>
		</view>

		<view class="wrong-list">
			<view class="wrong-list-item">
				<view class="exam-title">
					<text>【多选题】题目文字模拟</text>
				</view>
				<view class="title-line"></view>
				<view class="select-option">
					<view class="select-content">
						<text>A.选项A模拟</text>
					</view>
				</view>
				<view class="select-option">
					<view class="select-content error-option">
						<text>B.选项B模拟</text>
					</view>
				</view>
				<view class="select-option">
					<view class="select-content">
						<text>C.选项C模拟</text>
					</view>
				</view>
				<view class="select-option">
					<view class="select-content">
						<text>D.选项D模拟</text>
					</view>
				</view>
				<view class="answer">
					<text>正确答案：A.选项A模拟</text>
				</view>
				<view class="title-line"></view>
				<view class="ideas" @click="onShowIdeas">
					<text>查看解析</text>
				</view>
			</view>

			<view class="wrong-list-item">
				<view class="exam-title">
					<text>【单选题】单选题题目模拟</text>
				</view>
				<view class="title-line"></view>
				<view class="select-option">
					<view class="select-content error-option">
						<text>A.选项模拟内容</text>
					</view>
				</view>
				<view class="select-option">
					<view class="select-content">
						<text>B.选项模拟内容</text>
					</view>
				</view>
				<view class="select-option">
					<view class="select-content">
						<text>C.选项模拟内容</text>
					</view>
				</view>
				<view class="select-option">
					<view class="select-content">
						<text>D.选项模拟内容</text>
					</view>
				</view>
				<view class="answer">
					<text>正确答案：A.选项模拟内容</text>
				</view>
				<view class="title-line"></view>
				<view class="ideas" @click="onShowIdeas">
					<text>查看解析</text>
				</view>
			</view>
			
			
                <view class="wrong-list-item">
				<view class="exam-title">
					<text>【判断题】单选题题目模拟</text>
				</view>
				<view class="title-line"></view>
				<view class="select-option">
					<view class="select-content error-option">
						<text>A.正确</text>
					</view>
				</view>
				<view class="select-option">
					<view class="select-content">
						<text>B.错误</text>
					</view>
				</view>
				<view class="answer">
					<text>正确答案：A.选项模拟内容</text>
				</view>
				<view class="title-line"></view>
				<view class="ideas" @click="onShowIdeas">
					<text>查看解析</text>
				</view>
			</view>
			

		</view>

		<view v-if="showIdeas" class="popup" @click="closePopup">
			<view class="popup-content" @click.stop="">
				<view class="ideas-line">
				</view>
				<view class="ideas-content">
					<text>{{ideas}}</text>
				</view>
				<view class="footer-block"></view>
			</view>
		</view>

		<view class="footer-block">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stuName: "最好的自己",
				showIdeas: false,
				ideas: ""
			};
		},
		methods: {
			onShowIdeas() {
				this.ideas = "测试解题分析内容"
				this.showIdeas = true
			},
			closePopup(){
				this.showIdeas = false
			}
		}
	}
</script>
<style>
	page {
		background: #F5F6F7;
	}

	uni-button::after {
		border: none;
	}

	.ellipse-line {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ellipse-2 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.footer-block {
		width: 100vw;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.header-block {
		width: 100vw;
		padding-top: env(safe-area-inset-top);
	}

	.white-header {
		color: #fff !important;
	}

	.wrong-header-bg {
		background: linear-gradient(90deg, rgba(28, 162, 251, 1), rgba(2, 123, 254, 1));
		color: #fff;
	}
</style>
<style lang="scss" scoped>
	.popup{
		position: fixed;
		bottom: 0;
		left: 0;
		height: 100vh;
		background-color: rgba($color: #000000, $alpha: 0.5);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		.popup-content{
			min-height: 60vh;
			background-color: #ffffff;
			border-radius: 16rpx;
			overflow: hidden;
		}
	}
	.box {
		.bg{
			width: 750rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
		background-size: 750rpx 292rpx;
		height: 292rpx;
		position: relative;

		.cuoti-header {
			height: 200rpx;
			z-index: 999;
			padding-left: 60rpx;
			padding-top: 26rpx;

			.cuoti-one {
				text {
					height: 50rpx;
					font-size: 36rpx;
					font-family: PingFangSC, PingFangSC-Regular;
					font-weight: 400;
					text-align: left;
					color: #ffffff;
					line-height: 50rpx;
				}
			}

			.cuoti-two {
				padding-top: 10rpx;

				text {
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFangSC-Regular;
					font-weight: 400;
					text-align: left;
					color: #ffffff;
					line-height: 34rpx;
				}
			}
		}

		.image-header {
			position: absolute;
			left: 0;
			top: 0;

			image {
				height: 292rpx;
				width: 750rpx;
			}
		}
	}

	.ideas-line {
		margin: 25rpx auto 25rpx auto;
		width: 200rpx;
		height: 8rpx;
		background: rgba(216, 216, 216, 0.6);
		border-radius: 6rpx;
	}

	.ideas-content {
		padding: 0 60rpx 30rpx 60rpx;

		text {
			font-size: 40rpx;
			font-family: PingFangSC, PingFangSC-Regular;
			font-weight: 400;
			text-align: center;
			color: #666666;
			line-height: 56rpx;
		}
	}

	.subject {
		display: flex;
		justify-content: center;
		height: 150rpx;

		.nubber {
			width: 210rpx;
			// height: 150rpx;
			text-align: center;
			display: flex;
			flex-direction: column;

			.num {

				font-size: 48rpx;
				font-family: PingFangSC, PingFangSC-Medium;
				font-weight: 500;
				text-align: left;
				color: #333333;
				line-height: 66rpx;
				margin-top: 20rpx;
				text-align: center;
			}

			.txt {
				font-size: 28rpx;
				font-family: PingFangSC, PingFangSC-Regular;
				font-weight: 400;
				text-align: left;
				color: #999999;
				line-height: 40rpx;
				text-align: center;
			}
		}
	}

	.dq {
		width: 630rpx;
		// height: 160rpx;
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(206, 204, 204, 0.5);
		margin-left: 60rpx;
		position: absolute;
		top: 144rpx;
	}

	.wrong-list {
		padding: 30rpx 60rpx;

		.wrong-list-item {
			width: 630rpx;
			background: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(117, 117, 117, 0.28);
			margin-bottom: 30rpx;

			.exam-title {
				padding: 30rpx 25rpx 25rpx 25rpx;
				font-size: 30rpx;
				font-family: PingFangSC, PingFangSC-Regular;
				font-weight: 400;
				text-align: left;
				color: #333333;
				line-height: 40rpx;
			}

			.title-line {
				width: 630rpx;
				height: 2rpx;
				background: rgba(216, 216, 216, 0.76);
			}

			.answer {
				padding: 30rpx;

				text {
					width: 254rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC, PingFangSC-Light;
					font-weight: 300;
					text-align: center;
					color: #333333;
					line-height: 40rpx;
				}
			}

			.ideas {
				padding: 35rpx;
				text-align: center;

				text {
					font-size: 32rpx;
					font-family: PingFangSC, PingFangSC-Regular;
					font-weight: 400;
					text-align: left;
					color: #1598fc;
				}
			}

			.select-option {
				padding: 30rpx 30rpx 0 30rpx;

				.error-option {
					background: #f66565 !important;

					text {
						color: #ffffff !important;
					}
				}

				.select-content {
					background: #eeeeee;
					border-radius: 4rpx;
					padding: 20rpx 30rpx;

					text {
						font-size: 30rpx;
						font-family: PingFangSC, PingFangSC-Regular;
						font-weight: 400;
						text-align: left;
						color: #888888;
						line-height: 50rpx;
					}
				}
			}
		}
	}
</style>
